Вход

Просмотр полной версии : Непойму в чем разница в коде


NT Man
01.10.2009, 22:45
В IE так вот работает:
var a = NN.childNodes; var l = a.length;
for (var i = 0; i < l; i++) insobj.appendChild(a[0]);
А вот так не работает:
var a = NN.childNodes; var l = a.length;
for (var i = 0; i < l; i++) insobj.appendChild(NN.childNodes[0]);
Всем остальным браузерам фиолетово как написано.
В чем тут грабля расскажите пожалуйста.

micscr
03.10.2009, 09:29
Лично я когда добавляю что-то в структуру документа
сначала этот элемент создаю методами document.createElement
или узел.cloneNode(глубина) и др.
Вы же в appendChild помещаете ссылку на уже находящийся в структуре
DOM элемент и оставляете все проблемы решать браузеру. И у
браузеров на такой случай наверное разные методы решения и если
понимают по разному - то тут ничего странного.

x-yuri
03.10.2009, 10:30
Adds the node newChild to the end of the list of children of this node. If the newChild is already in the tree, it is first removed. (http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-core.html#ID-184E7107)
в общем в стандарте этот пункт предусмотрен

NT Man, что значит не работает? Ошибки возникают?

NT Man
05.10.2009, 17:03
NT Man, что значит не работает? Ошибки возникают?

Нет никаких ошибок. Если кому интересно, чтоб было понятно о чем речь вот конкретная дрозофилка. Смотрим что получается в IE потом комментируем две строчки под комментарием "Рабочий пример." и раскомментируем две строчки под комментарием не рабочий пример снова смотрим :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег SELECT</title>
<script>
function ggg() {
var to = document.getElementById("bbb");
var from = document.createElement('p');
from.innerHTML = '<select><option value="1">Чебурашка</option><option selected value="2">Крокодил Гена</option><option value="3">Шапокляк</option><option value="4">Крыса Лариса</option></select>';
while (to.firstChild) to.removeChild(to.firstChild);

// Рабочий пример.
var a = from.firstChild.childNodes; var l = a.length;
for (var i = 0; i < l; i++) to.appendChild(a[0]);

// Не рабочий пример только для IE
// var a = from.firstChild; var l = a.childNodes.length;
// for (var i = 0; i < l; i++) to.appendChild(a.childNodes[0]);

}
</script>
</head>
<body>
<form action="select1.php" method="post">
<p><select id="bbb" name="hero"></select></p>
</form>
<input type="button" value="ins select" onclick="ggg()"/>
</body>
</html>

e1f
05.10.2009, 19:00
Почему не так?
while (from.firstChild) to.appendChild(from.firstChild)

NT Man
05.10.2009, 19:23
Почему не так?
while (from.firstChild) to.appendChild(from.firstChild)

Замечательно у нас теперь два нерабочих примера!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег SELECT</title>
<script>
function ggg() {
var to = document.getElementById("bbb");
var temp = document.createElement('p');
temp.innerHTML = '<select><option value="1">Чебурашка</option><option selected value="2">Крокодил Гена</option><option value="3">Шапокляк</option><option value="4">Крыса Лариса</option></select>';
from = temp.firstChild;

while (to.firstChild) to.removeChild(to.firstChild);
// Рабочий пример.
var a = from.childNodes; var l = a.length;
for (var i = 0; i < l; i++) to.appendChild(a[0]);

// Не рабочий пример только для IE
// var a = from; var l = a.childNodes.length;
// for (var i = 0; i < l; i++) to.appendChild(a.childNodes[0]);

// Еще один не рабочий пример только для IE
// while (from.firstChild) to.appendChild(from.firstChild);
}
</script>
</head>
<body>
<form action="select1.php" method="post">
<p><select id="bbb" name="hero"></select></p>
</form>
<input type="button" value="ins select" onclick="ggg()"/>
</body>
</html>

e1f
05.10.2009, 19:44
Замечательно у нас теперь два нерабочих примера!

Шеф, усё работает! Что я делаю не так? ;)

NT Man
05.10.2009, 19:53
Шеф, усё работает! Что я делаю не так? ;)

Что по умолчанию выходит? Правильный ответ "Корокодил Гена", а не "Крыса Лариса" :)

x-yuri
06.10.2009, 11:05
приведу свой вариант
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег SELECT</title>
<script>
function ggg() {
var to = document.getElementById("bbb");

var div = document.createElement('div');
div.innerHTML = '<select><option selected>1 selected</option><option>2</option></select>';

var opt1 = document.createElement('option'),
opt2 = document.createElement('option'),
select = document.createElement('select');
opt1.innerHTML = '1 selected';
opt1.selected = true;
opt2.innerHTML = '2';
select.appendChild( opt1 );
select.appendChild( opt2 );

var children = div.firstChild.childNodes;
while( children.length )
{ alert( children[0].innerHTML+', '+
children[0].selected );
to.appendChild( children[0] );
}
}
</script>
</head>
<body>
<form action="select1.php" method="post">
<p><select id="bbb" name="hero"></select></p>
</form>
<input type="button" value="ins select" onclick="ggg()"/>
</body>
</html>

если обращаться к option через children, то текущим становится выбранный пункт. Если же через div.firstChild.childNodes - последний. Можно даже добавить больше пунктов, чтобы проверить. Но не забываем что при appendChild option'ы удаляются из исходного select'а, значит один из вариантов поведения: в исходном select должен меняться текущий option (при удалении текущего). Но ie идет дальше (либо так изначально задумывалось, либо они пофиксили свое поведение), если мы обращаемся к appendChild через ссылку на childNodes, значит мы обходим всех детей select (менять текущий пункт не надо), если же через childNodes - значит мы хотим просто извлечь отдельный пункт
p.s. зацените теорию ;)

e1f
06.10.2009, 13:07
Да, заценил ;) Правда, мне снятие selected представляется вполне логичным. FF 3.0.14 -- Во всех вариантах Крыса Лариса; Опера 9.64 -- во всех вариантах Крокодил Гена, ИЕ8 -- 1й Крокодил, дальше Крыса. Имеет ли смысл рассчитывать на что-то в таком случае?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег SELECT</title>
<script type="text/javascript">
function ggg(k) {
var to = document.getElementById("bbb");
var temp = document.createElement('p');
temp.innerHTML = '<select><option value="1">Чебурашка</option><option selected value="2">Крокодил Гена</option><option value="3">Шапокляк</option><option value="4">Крыса Лариса</option></select>';
from = temp.firstChild;

while (to.firstChild) to.removeChild(to.firstChild);
switch (k) {
case 1:
// Рабочий пример.
var a = from.childNodes; var l = a.length;
for (var i = 0; i < l; i++) to.appendChild(a[0]);
break;
case 2:
// Не рабочий пример только для IE
var a = from; var l = a.childNodes.length;
for (var i = 0; i < l; i++) to.appendChild(a.childNodes[0]);
break;
case 3:
// Еще один не рабочий пример только для IE
while (from.firstChild) to.appendChild(from.firstChild);
break;
}
}
</script>
</head>
<body>
<form action="/" method="post">
<p><select id="bbb" name="hero"></select></p>
<input type="button" value="ins select v1" onclick="ggg(1)" />
<input type="button" value="ins select v2" onclick="ggg(2)" />
<input type="button" value="ins select v3" onclick="ggg(3)" />
</form>
</body>
</html>

x-yuri
06.10.2009, 13:45
Имеет ли смысл рассчитывать на что-то в таком случае?
а почему нет: либо делай ссылку на childNodes, либо явно выбирай option в конце

NT Man
06.10.2009, 13:54
Имеет ли смысл рассчитывать на что-то в таком случае?
Для меня да. Т.к. приведенная здесь вырезка кода предназначается сугубо для IE.

e1f
06.10.2009, 13:56
x-yuri,
так не помогает делать ссылку на childNodes -- FF на это не ведется :)
Так что вариант:
var ind = from.selectedIndex;
while (from.firstChild) to.appendChild(from.firstChild);
to.selectedIndex = ind;
мне нравится больше всего.